<script lang="ts" setup>
const props = defineProps({
  msg: {
    type: Object,
    required: true,
  },
});
watch(
  () => props.msg,
  (newVal, oldVal) => {
    if (newVal.show) {
      setTimeout(() => {
        props.msg.show = false;
      }, 2000);
    }
  }
);
</script>

<template>
  <div
    v-if="msg.show"
    class="rounded border-s-4 p-4 max-w-lg my-4"
    :class="{
      'border-red-500 bg-red-50 text-red-500': !msg.valid,
      'border-green-500 bg-green-50 text-green-500': msg.valid,
    }"
  >
    {{ msg.content }}
  </div>
</template>
